import React, { useMemo } from "react";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import FiltersWidget from "../../Widgets/Filters.widget";
import FilteredProductsBlockWidget from "../../Widgets/FilteredProductsBlock.widget";
import BreadcrumbsAtom from "../../UI_KIT/Atoms/Breadcrumbs.Atom";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";
import { useTranslation } from "react-i18next";
import { MainLayoutProps } from "./type";
import ProductBlockCeil from "../../UI_KIT/Cells/ProductBlock.ceil";
import heightChild from "./styled/styles.module.css";

const MainLayout: React.FC<MainLayoutProps> = ({
  uniqueBrands,
  uniqueColors,
  maxPrice,
  filters,
  applyFilters,
  clearFilters,
  filteredProducts,
  title,
  menuCategory,
  isLoading,
}) => {
  const { t } = useTranslation();

  const renderContent = useMemo(() => {
    if (isLoading) {
      return (
        <div
          className={`mt-6 grid grid-cols-3 gap-7 ${heightChild.height_rowCustom}`}
        >
          {Array.from({ length: 6 }).map((_, index) => (
            <ProductBlockCeil key={index} isLoading={isLoading} />
          ))}
        </div>
      );
    }
    if (!filteredProducts) {
      return (
        <TextAtom type={TextAtomEnum.enum_h3} className="text-red">
          {t("mainLayout.error")}
        </TextAtom>
      );
    }
    if (filteredProducts.length === 0) {
      return (
        <div className="text-textColor flex flex-col justify-center items-center h-[70vh] gap-4">
          <TextAtom type={TextAtomEnum.enum_h4} className="font-bold">
            {t("filterOrganism.EmptyBlock.subHead")}
          </TextAtom>
          <TextAtom type={TextAtomEnum.enum_h4} className="font-medium">
            {t("filterOrganism.EmptyBlock.title")}
          </TextAtom>
        </div>
      );
    }
    return (
      <>
        <TextAtom
          type={TextAtomEnum.enum_h5}
          className="my-6 font-medium text-center text-tiffany uppercase"
        >
          {`${t("mainLayout.count")} ${filteredProducts.length}`}
        </TextAtom>
        <div
          className={`grid grid-cols-3 gap-7 ${heightChild.height_rowCustom}`}
        >
          <FilteredProductsBlockWidget filteredProducts={filteredProducts} />
        </div>
      </>
    );
  }, [filteredProducts, isLoading, t]);

  return (
    <div className={`${globalContainer}`}>
      <BreadcrumbsAtom />
      <TextAtom
        type={TextAtomEnum.enum_h2}
        className="my-10 font-medium text-tiffany uppercase"
      >
        {title}
      </TextAtom>
      <div className="flex gap-8">
        <div className="flex flex-col gap-y-4 max-w-[212px] w-full">
          {menuCategory}
        </div>
        <div className="flex-[1]">
          <FiltersWidget
            filters={filters}
            applyFilters={applyFilters}
            maxPrice={maxPrice}
            uniqueBrands={uniqueBrands}
            uniqueColors={uniqueColors}
            clearFilters={clearFilters}
          />
          {renderContent}
        </div>
      </div>
    </div>
  );
};

export default React.memo(MainLayout);
